<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>弹幕demo</title>
        <script>
            !function(t,e){var n=t.documentElement,i="orientationchange"in window?"orientationchange":"resize",o=function(){var t=n.clientWidth,e=750;t&&(t>=e?n.style.fontSize="100px":n.style.fontSize=100*(t/e)+"px")};o(),t.addEventListener&&(e.addEventListener(i,o,!1),t.addEventListener("DOMContentLoaded",o,!1))}(document,window);
        </script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box-barrage {
                position: relative;
                width: 6.44rem;
                height: 3rem;
                margin: .1rem auto 0;
                overflow: hidden;
                font-size: .22rem;
                color: #8a7e6d;
            }
            .box-danmu{
                -webkit-user-select: none;
                user-select: none;
                position: absolute;
                left: 0;
                top: 0;
                width:100%;
                height:100%;
                background-color: #f5f5f5;
                z-index: 1;
            }
            .box-danmu .text{
                position: relative;
                top: 2px;
                pointer-events:none;
                display: inline-block;
                padding: 0 0.2rem; 
                background: rgba(203, 161, 101, .1);
                height: .54rem;
                line-height: .54rem;
                font-size: .24rem;
                border-radius:5px;
                animation:barrage 5s ease-in infinite;
                -webkit-animation: barrage 5s ease-in infinite;
            }
            .box-danmu .text.text-ad{
              position: absolute;
              pointer-events:auto;
              width: 142px;
              padding: 0;
            }
            .box-danmu .text-badge{
              position: absolute;
              top:-3px;
              right: -3px;
              z-index: 2;
              width: 6px;
              height: 6px;
              border-radius:50%;
              background-color: #ff3b30;
            }
            .box-danmu .text-con{
                position: absolute;
                width: 100%;
                 height: 100%; 
                 /* height: 110%; */ 
                left: 0;
                right: 0;
                 top: 0; 
                 /* top: -10%;  */
                bottom: 0;
                background-color: #55aaec;
                border-radius: 5px;
                overflow: hidden;
            }
            .text-vm-fix{
              position: relative;
              top: -.06rem;
            }
            .box-danmu .text-mark{
                position: absolute;
                bottom: -2px;
                right: 1px;
                width: .45rem;
                height: .22rem;
                line-height: .22rem;
                text-align: center;
                /* border-radius:5px; */ 
                background-color: rgba(0,0,0,.16);
                font-size: .2rem;
                color:#fff;
            }
            .box-danmu .text small {
                font-size: .24rem;
                color: #e9343b;
            }
            @-webkit-keyframes barrage {
              from {
                left:100%;
                transform:translate3d(0,0,0);  
              }

              to {
                left:0;
                transform:translate3d(-100%,0,0);  
              }
            }
            @keyframes barrage {
              from {
                left:100%;
                transform:translate3d(0,0,0);    
              }

              to {
                left:0;
                transform:translate3d(-100%,0,0);
              }
            }
        </style>
    </head>
    <body>
        <div class="box-barrage">
            <div class="box-danmu">
                <div class="text">你是我的眼,带我看尽四季的变换</div>
            </div>
        </div>
        <script src="../js/zepto-full.min.js"></script>
        <script>
            $(function(){

            })
        </script>
    </body>
</html>